<template>
    <div>
       <table>
           <tr>
               <th v-for="item in books" :key="item.id">{{ item }}</th>
           </tr>
           
           <tr v-for="i in name" :key="i.id">
               <td v-for="(k,key) in i" :key="key"> 

                <button  @click="i[key] <= 0 ? 0 : i[key]-- " v-if="key == 'quantity' "> - </button>

                <input v-model="i[key]" class="int" v-if=" key == 'quantity' " type="text">

                <button @click="i[key]++" v-if=" key == 'quantity' "> + </button>
                <span v-else> {{key == 'total' ? minus(i) : k }}</span>
               </td>
               
           </tr>
          
       </table>
        <div>合计为:{{ tota() }}</div> 
    </div>
</template>

<script>
export default {
    data() {
        return{
            Carat:0,
           books: {
                   id:"序号",
                   title:"书名",
                   price:"单价",
                   quantity:"数量",
                   total:"合计"
               },
               name: [
                        {
                        id:1,
                        title:"水浒传",
                        price:107,
                        quantity:0,
                        total:0,
                    },
                        {
                        id:2,
                        title:"西游记",
                        price:192,
                        quantity:0,
                        total:0,
                    },
                        {
                        id:3,
                        title:"三国演义",
                        price:219,
                        quantity:0,
                        total:0,
                    },
                        {
                        id:4,
                        title:"红楼梦",
                        price:178,
                        quantity:0,
                        total:0,
                        
                    }
               ]
               
        }
    },
    methods :{
        fn(i) {
            if (i.key <= 0) {
                return i.key= i.key++
            }
            console.log(i.key);
        },
       
        
    },
     methods :{
                minus(item) {
                return item.price * item.quantity
            } ,
            tota () {
                return this.name.reduce((a, b) => a + b.price * b.quantity ,0)
            }  
    }
}
</script>

<style scoped>
    .int {
        width: 20px;
    }
</style>